
<template>
  <div id="app">
   <header class="header-container">
     <!-- <header-nav /> -->
     <router-view name="header" />
   </header>
   <main class="main-container">
     <router-view />
   </main>
   <footer class="footer-container">
     <router-view name="footer" />
   </footer>
  </div>
</template>
<script>
import './_reset.scss'
// import Tabbar from './components/Tabbar'
// import HeaderTitle from './components/headerTitle'
// import HeaderNav from './components/header'

export default {
  name: 'APP',
  components: {
  }
}
</script>

<style lang="scss" scoped>

  html, body {
    height: 100%;
  }
  #app{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header-container{
      width: 100%;
      height: 63px;
      border-bottom:  1px solid;
    }
    .main-container {
      // width: 100%;
      // height: 547px;
      flex: 1;
      overflow-x: hidden;
    }
    .footer-container{
      width: 100%;
      height: 55px;
    }
  }
</style>
